<template>
<div class="left-item">
        <!-- 基础组件 -->
        <a-collapse default-active-key="1" :bordered="false" style="background: white;padding-bottom: 0px">
            <a-collapse-panel key="1" :header="i18n('portalMobile.basicComponents','基础组件')">
                <div class="assembly">
                    <div v-for="(item,index) in basics" @click="addBasic(item.type)" :key="index">
                        <div class="assembly-icon">
                            <img :src="item.imgsrc"></img>
                        </div>
                        <span>{{item.text}}</span>
                    </div></div>
            </a-collapse-panel>
        </a-collapse>
    <a-collapse default-active-key="1" :bordered="false" style="background: white;margin-top: -20px">
        <a-collapse-panel key="1" :header="i18n('portalMobile.commonComponents','公用组件')">
            <div class="assembly">
                <div v-for="(item,index) in common" @click="addBasic(item.type)" :key="index">
                    <div class="assembly-icon">
                        <img :src="item.imgsrc"></img>
                    </div>
                    <span>{{item.text}}</span>
                </div></div>
        </a-collapse-panel>
    </a-collapse>
    </div>
</template>

<script>
export default {
    data(){
        return{
             // 公共组件数组
            common:[
                {
                    imgsrc:require('@/image/bpm-column.png'),
                    text: this.i18n('portalMobile.processColumn','流程栏目'),
                    type:"process"
                },{
                    imgsrc:require('@/image/bpm-column.png'),
                    text: this.i18n('portalMobile.largeScreen','大屏栏目'),
                    type:"largeScreen"
                },
            ],
            // 基础组件数组
            basics:[
                {
                    imgsrc:require('@/image/lin-column.png'),
                    text: this.i18n('portalMobile.wheel','轮播图'),
                    type:"wheel"
                },
                {
                    imgsrc:require('@/image/column.png'),
                    text: this.i18n('portalMobile.grid','栏目'),
                    type:"grid"
                },
                {
                    imgsrc:require('@/image/list.png'),
                    text: this.i18n('portalMobile.notice','公告'),
                    type:"notice"
                },
                {
                  imgsrc: require('@/image/tab-column.png'),
                    text: this.i18n('portalMobile.tab','tab栏目'),
                    type:"tab"
                },
            ]
        }
    },
    methods:{
        i18n(name,text,key){
            return this.$ti18(name,text,"insPortalDef",key);
        },
        addBasic(type){
    	  this.$emit("addBasic",type);
        }
    }
}
</script>

<style scoped>
.left-item >>> .ant-collapse-item{
    border: none!important;
}
.left-item{
    width: 290px;
}
.assembly{
    display: flex;
    flex-wrap: wrap;
}
.assembly>div{
    width: 72px;
    margin-right: 18px;
    margin-bottom: 22px;
    cursor: pointer;
}
.assembly>div:nth-child(3n){
    margin-right: 5px!important;
}
.assembly span{
    display: block;
    text-align: center;
    color: #555555;
}
.assembly-icon{
    width: 72px;
    height: 72px;
    border-radius: 2px;
    border: dashed 1px #dadde0;
    margin: auto;
}

</style>
